<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head th:replace="_fragments::head(~{::title})">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="stylesheet" href="../static/css/semantic.min.css">
    <link rel="stylesheet" href="../static/css/me.css">

    <title>关于我</title>
</head>

<body>

<!--导航-->
<nav th:replace="_fragments::menu(5)" class="ui inverted attached segment"></nav>

<!--中间内容-->
<div class="m-padded-tb-big m-container">
    <div class="ui container">
        <div class="ui stackable grid">
            <div class="eleven wide column">
                <div class="ui segment">
                    <img src="https://picsum.photos/id/1027/800/500" alt="" class="ui rounded image">
                </div>
            </div>
            <div class="five wide column">
                <div class="ui top attached segment">
                    <div class="ui header">关于我</div>
                </div>
                <!--自我简介-->
                <div class="ui attached segment">
                    <p class="m-text">郭永潇，一个独立开发者，折腾在 0 和 1 世界的大叔；一个终生学习者，誓将学习无限循环。
                        希望结识可以共同成长的小伙伴。</p>
                    <p class="m-text">热爱编程，喜欢折腾，正在探索高效学习编程技术的方法。。。</p>
                </div>
                <!--爱好标签-->
                <div class="ui attached segment">
                    <div class="ui orange basic left pointing label">编程</div>
                    <div class="ui orange basic left pointing label">写作</div>
                    <div class="ui orange basic left pointing label">思考</div>
                    <div class="ui orange basic left pointing label">运动</div>
                </div>
                <!--技能标签-->
                <div class="ui attached segment">
                    <div class="ui teal basic left pointing label m-margin-tb-tiny">Java</div>
                    <div class="ui teal basic left pointing label m-margin-tb-tiny">JavaScript</div>
                    <div class="ui teal basic left pointing label m-margin-tb-tiny">PostgreSQL</div>
                    <div class="ui teal basic left pointing label m-margin-tb-tiny">Redis</div>
                    <div class="ui teal basic left pointing label m-margin-tb-tiny">Git</div>
                    <div class="ui teal basic left pointing label m-margin-tb-tiny">整理</div>
                    <div class="ui teal basic left pointing label m-margin-tb-tiny">...</div>
                </div>
                <!--底部联系方式-->
                <div class="ui bottom attached segment">
                    <a href="#" class="ui circular icon button"><i class="github icon"></i></a>
                    <a href="#" class="ui wechat circular icon button"><i class="wechat icon"></i></a>
                    <a href="#" class="ui qq circular icon button" data-content="805372666"
                       data-position="bottom center"><i class="qq icon"></i></a>
                </div>

                <!--微信图标：弹出二维码-->
                <div class="ui wechat-qr flowing popup transition hidden">
                    <img src="../static/images/wechat.png" alt="" class="ui rounded image" style="width: 120px">
                </div>
            </div>
        </div>
    </div>
</div>

<br><br>

<!--页脚-->
<footer th:replace="_fragments::footer" class="ui inverted vertical segment"></footer>

<!--/*/<th:block th:replace="_fragments::script">/*/-->
<script src="../static/js/jquery.min.js"></script>
<script src="../static/js/semantic.min.js"></script>
<!--/*/</th:block>/*/-->

<script>
    $(".qq").popup();

    $('.wechat').popup({
        popup: $('.wechat-qr'),
        on: 'hover',
        position: 'bottom center'
    });
</script>

</body>
</html>